<template>
	<view class="page-container">
		<view class="cinema-container">
			<!-- 城市选择栏 -->
			<view class="city-bar">
				<view class="city-selector" @tap="showCityPicker">
					<text class="city-name">{{selectedCity || '选择城市'}}</text>
					<u-icon name="arrow-down" size="24" color="#666"></u-icon>
				</view>
			</view>
			
			<!-- 影院列表 -->
			<scroll-view scroll-y class="cinema-list">
				<view 
					class="cinema-item" 
					v-for="(cinema, index) in sortedCinemaList" 
					:key="index"
					@tap="chooseCinema(cinema)"
				>
					<view class="cinema-info">
						<text class="name">{{cinema.address}}</text>
						<view class="price-info">
							<text class="price">¥{{cinema.price}}</text>
							<text class="price-label">起</text>
						</view>
					</view>
					<view class="cinema-detail">
						<view class="language-type">
							<u-tag 
								:text="cinema.language_type" 
								type="warning" 
								size="mini"
							/>
						</view>
						<view class="location-info">
							<text class="distance">{{cinema.distance}}km</text>
							<text class="status" :class="{'active': cinema.status === 1}">
								{{cinema.status === 1 ? '营业中' : '休息中'}}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 城市选择器弹出层 -->
			<u-popup :show="showCityPopup" mode="bottom" @close="showCityPopup = false" round="10">
				<view class="city-popup">
					<view class="city-item" 
						v-for="(city, index) in cityList" 
						:key="index"
						@click="selectCity(city)">
						<text class="city-text">{{city.name}}</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			movieId: 0,
			API: getApp().globalData().API,
			cinemaList: [],
			userLongitude: '',
			userLatitude: '',
			showCityPopup: false,
			selectedCity: '',
			selectedCityCode: '330100', // 新增城市邮政编码变量
			cityList: [
				{ name: '杭州', code: '310000' },
				{ name: '上海', code: '200000' },
				{ name: '北京', code: '100000' },
				{ name: '广州', code: '510000' },
				{ name: '深圳', code: '518000' },
				{ name: '南昌', code: '330100' }
			]
		}
	},
	methods: {
		// 计算两点之间的距离（单位：公里）
		calculateDistance(lat1, lon1, lat2, lon2) {
			if (!lat1 || !lon1 || !lat2 || !lon2) return 0
			
			const R = 6371 // 地球半径（公里）
			const dLat = this.toRad(lat2 - lat1)
			const dLon = this.toRad(lon2 - lon1)
			const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
					Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) * 
					Math.sin(dLon/2) * Math.sin(dLon/2)
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
			return R * c
		},
		
		// 将角度转换为弧度
		toRad(degree) {
			return degree * Math.PI / 180
		},
		getSchedules(){
			let that = this;
			uni.request({
				url: that.API + '/schedules/listByMovieId',
				method: 'GET',
				data:{
					movieId: that.movieId,
					cityCode: that.selectedCityCode
				},
				success(res){
					console.log(res);
					that.cinemaList = res.data.data;
				}
			})
		},
		chooseCinema(cinema) {
			// 选择影院后的处理
			uni.navigateTo({
				url: `/pages/moviedetail/moviedetail?cinemaId=${cinema.id}&movieId=${this.movieId}`
			})
		},
		showCityPicker() {
			this.showCityPopup = true
		},
		selectCity(city) {
			this.selectedCity = city.name
			this.selectedCityCode = city.code
			this.showCityPopup = false
			this.getSchedules()
		}
	},
	onLoad(options){
		let that = this;
		that.movieId = options.id
		// 设置默认城市
		that.selectedCity = '南昌'
		that.selectedCityCode = '330100'
		setTimeout(function(){
			that.getSchedules()
		},1000)
		setTimeout(function(){
			uni.getLocation({
				type: 'gcj02',  // 必须使用GCJ-02坐标系
				success: (res) => {
					that.userLatitude = res.latitude;
					that.userLongitude = res.longitude;
					console.log(that.userLatitude);
					console.log(that.userLongitude);
				}
			});
		},1000)
	},
	computed: {
		sortedCinemaList() {
			return this.cinemaList.map(cinema => {
				// 计算距离
				const distance = this.calculateDistance(
					this.userLatitude,
					this.userLongitude,
					cinema.latitude,
					cinema.longitude
				)
				return {
					...cinema,
					distance: distance.toFixed(1)
				}
			}).sort((a, b) => a.distance - b.distance) // 按距离排序
		}
	},
}
</script>

<style lang="scss">
.cinema-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	
	.cinema-list {
		.cinema-item {
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			
			.cinema-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					flex: 1;
					margin-right: 20rpx;
				}
				
				.price-info {
					display: flex;
					align-items: baseline;
					
					.price {
						font-size: 36rpx;
						color: #ff5722;
						font-weight: bold;
					}
					
					.price-label {
						font-size: 24rpx;
						color: #999;
						margin-left: 4rpx;
					}
				}
			}
			
			.cinema-detail {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.language-type {
					font-size: 24rpx;
				}
				
				.location-info {
					display: flex;
					align-items: center;
					
					.distance {
						font-size: 28rpx;
						color: #2979ff;
						font-weight: 500;
						margin-right: 20rpx;
					}
					
					.status {
						font-size: 24rpx;
						color: #999;
						
						&.active {
							color: #4CAF50;
						}
					}
				}
			}
		}
	}
}

.city-bar {
	background: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	
	.city-selector {
		display: flex;
		align-items: center;
		
		.city-name {
			font-size: 32rpx;
			color: #333;
			margin-right: 10rpx;
		}
	}
}

.city-popup {
	background: #fff;
	padding: 30rpx;
	max-height: 60vh;
	
	.city-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		
		.city-text {
			font-size: 32rpx;
			color: #333;
		}
		
		&:last-child {
			border-bottom: none;
		}
	}
}
</style>